<template>
	<teleport to="body">
		<transition :name="transition">
			<div v-show="currentVisible" class="ta-quick-popup-wrapper" :style="{ zIndex }">
				<!-- 遮罩层 - 仅在showMask为true时显示 -->
				<div v-if="showMask" class="ta-quick-popup-mask" @click="onMaskClick"></div>

				<!-- 实际内容容器 - 根据position定位 -->
				<div class="ta-quick-popup" :class="[
            position ? `ta-quick-popup--${position}` : '',
            customClass
          ]">
					<div class="ta-quick-popup__container" :class="{ 'is-rounded': rounded }">
						<div v-if="showHeader" class="ta-quick-popup__header">
							<slot name="header">
								<div class="ta-quick-popup__title">{{ title }}</div>
								<button v-if="showClose" class="ta-quick-popup__close" @click="close">
									<i class="ta-icon-close"></i>
								</button>
							</slot>
						</div>
						<div class="ta-quick-popup__content">
							<slot></slot>
						</div>
						<div v-if="$slots.footer" class="ta-quick-popup__footer">
							<slot name="footer"></slot>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</teleport>
</template>

<script>
	export default {
		name: 'TaQuickPopup',
		props: {
			modelValue: {
				type: Boolean,
				default: false
			},
			// 弹窗标题
			title: {
				type: String,
				default: ''
			},
			// 弹窗位置：center, top, bottom, left, right
			position: {
				type: String,
				default: 'center'
			},
			// 是否显示关闭按钮
			showClose: {
				type: Boolean,
				default: true
			},
			// 是否显示标题栏
			showHeader: {
				type: Boolean,
				default: true
			},
			// 是否显示遮罩层
			showMask: {
				type: Boolean,
				default: false
			},
			// 是否圆角
			rounded: {
				type: Boolean,
				default: true
			},
			// 点击遮罩层是否关闭
			closeOnClickMask: {
				type: Boolean,
				default: true
			},
			// 自定义过渡名称
			transition: {
				type: String,
				default: 'popup-fade'
			},
			// 自定义类名
			customClass: {
				type: String,
				default: ''
			},
			// 层级
			zIndex: {
				type: Number,
				default: 19900501
			}
		},
		computed: {
			currentVisible: {
				get() {
					return this.modelValue;
				},
				set(val) {
					this.$emit('update:modelValue', val);
				}
			}
		},
		methods: {
			// 关闭弹窗
			close() {
				this.currentVisible = false;
				this.$emit('close');
			},
			// 点击遮罩层
			onMaskClick() {
				if (this.closeOnClickMask) {
					this.close();
				}
			}
		}
	}
</script>

<style scoped>
	/* 整体包装容器 */
	.ta-quick-popup-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* 默认不拦截点击事件 */
	}

	/* 遮罩层 */
	.ta-quick-popup-mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		pointer-events: auto;
		/* 遮罩层需要拦截点击 */
	}

	/* 弹窗容器 */
	.ta-quick-popup {
		position: absolute;
		pointer-events: auto;
		/* 弹窗内容需要拦截点击 */
	}

	/* 各位置的定位 */
	.ta-quick-popup--center {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.ta-quick-popup--top {
		top: 0;
		left: 0;
		width: 100%;
	}

	.ta-quick-popup--bottom {
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.ta-quick-popup--left {
		top: 0;
		left: 0;
		height: 100%;
	}

	.ta-quick-popup--right {
		top: 0;
		right: 0;
		height: 100%;
	}

	.ta-quick-popup__container {
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/* 中心定位的容器样式 */
	.ta-quick-popup--center .ta-quick-popup__container {
		width: 80%;
		max-width: 500px;
		max-height: 90vh;
	}

	/* 上下定位的容器样式 */
	.ta-quick-popup--top .ta-quick-popup__container,
	.ta-quick-popup--bottom .ta-quick-popup__container {
		width: 100%;
		max-height: 80vh;
	}

	/* 左右定位的容器样式 */
	.ta-quick-popup--left .ta-quick-popup__container,
	.ta-quick-popup--right .ta-quick-popup__container {
		height: 100vh;
		width: 80%;
		max-width: 320px;
	}

	.ta-quick-popup__container.is-rounded {
		border-radius: 8px;
	}

	/* 根据位置调整圆角 */
	.ta-quick-popup--top .ta-quick-popup__container.is-rounded {
		border-radius: 0 0 8px 8px;
	}

	.ta-quick-popup--bottom .ta-quick-popup__container.is-rounded {
		border-radius: 8px 8px 0 0;
	}

	.ta-quick-popup--left .ta-quick-popup__container.is-rounded {
		border-radius: 0 8px 8px 0;
	}

	.ta-quick-popup--right .ta-quick-popup__container.is-rounded {
		border-radius: 8px 0 0 8px;
	}

	.ta-quick-popup__header {
		padding: 15px 20px;
		border-bottom: 1px solid #ebeef5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ta-quick-popup__title {
		font-size: 16px;
		color: #303133;
		font-weight: 500;
	}

	.ta-quick-popup__close {
		border: none;
		background: transparent;
		cursor: pointer;
		font-size: 18px;
		color: #909399;
	}

	.ta-quick-popup__close:hover {
		color: #409eff;
	}

	.ta-quick-popup__content {
		padding: 20px;
		overflow-y: auto;
		flex: 1;
	}

	.ta-quick-popup__footer {
		padding: 15px 20px;
		border-top: 1px solid #ebeef5;
		display: flex;
		justify-content: flex-end;
	}

	/* 过渡动画 */
	.popup-fade-enter-active,
	.popup-fade-leave-active {
		transition: opacity 0.3s;
	}

	.popup-fade-enter,
	.popup-fade-leave-to {
		opacity: 0;
	}
</style>
